<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<input type="checkbox" value="1">addEventListener
<input type="checkbox" onchange="cl()" value="2">onchange="cl()"
<script>
    let input = document.querySelector("input[type='text']");
    input.onchange = function () {
        console.log(0);
        console.log(input.value);
        //怎么理解this，就是看函数的调用者
    }
    //覆盖原来的事件
    input.onchange = function () {
        console.log(1);
        console.log(input.value);
        console.log(this);//就是表单元素对象
    }
    input.onchange = null;
    // input.removeEventListener("onchange");//无法移除匿名函数

    let cb = document.querySelector("input[type='checkbox']");
    console.log(cb);
    //addEventListener不会覆盖原来的事件，可以叠加
    //事件名称没有on
    cb.addEventListener("change", function () {
        console.log("a");
        console.log(cb.value);
        console.log(cb.checked);//是否勾选
    });//注意，IE添加事件的写法不一样
    function cl() {
        console.log("b");
        console.log(cb.value);
        console.log(cb.checked);//是否勾选
        console.log(this);//就是表单元素对象
    };
    cb.addEventListener("change", cl);//注意，IE添加事件的写法不一样
    // cb.attachEvent("change", cl);
    cb.removeEventListener("change", cl);
</script>
</body>
</html>